<template>
  <div class="bor">
    <div class="shop" v-for="(item, index) in info" :key="index">
      <div class="imgs">
        <img :src="item.img" alt />
      </div>
      <div class="shop1">
        <div class="titles">{{ item.title }}</div>
        <div class="shop2">
          <div class="money">价格: ￥{{ item.price }}</div>
          <div class="status">库存: {{ item.inventory }}</div>
          <div class="ppp">
            数量:
            <el-input-number v-model="num" :step="1" step-strictly></el-input-number>
          </div>
        </div>
      </div>
    </div>
    <div>
      <button class="butt">立即购买</button>
      <button class="bitts" @click="butoo">加入购物车</button>
      <router-link to="show.vue">
        <div class="el-icon-shopping-cart-full" @click="buycar()">购物车</div>
      </router-link>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      info: "",
      id: "",
      price: "",
      num: 1
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.shopinfo(this.id);
    console.info(this.id);
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    shopinfo(id) {
      let that = this;
      this.$axios
        .get("/info", {
          params: {
            id: id
          }
        })
        .then(function(response) {
          that.info = response.data;
          that.price = response.data[0].price;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    butoo() {
      let that = this;
      this.$axios
        .post("create", {
          id: that.id,
          price: that.price,
          num: that.num
        })
        .then(response => {
          console.log(response.data);
          if (response.data.code === 3) {
            this.$message(response.data.message);
          } else if (response.data.code === 1) {
            this.$message(response.data.message);
          } else {
            this.$message(response.data.message);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    buycar() {
      this.$router.push({
        path: "/buycar" //购物车页面
      });
    }
  }
};
</script>

<style>
.bor {
  width: 850px;
  height: 500px;
  margin-left: 350px;
  margin-top: 100px;
  border: black solid 1px;
  background: rgb(236, 231, 231);
}
.shop {
  display: flex;
  flex-direction: row;
}
.imgs img {
  width: 250px;
  height: 300px;
}
.titles {
  width: 550px;
  height: 200px;
  text-align-last: left;
  font-size: 50px;
  margin-top: 20px;
}
.shop2 {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.money {
  font-size: 35px;
  color: red;
}
.status {
  font-size: 35px;
}
.bitts {
  width: 200px;
  height: 50px;
  background: yellow;
}
.ppp {
  font-size: 35px;
}
.butt {
  width: 200px;
  height: 50px;
  background: red;
}
.shuliang {
  background: skyblue;
}
</style>
